{% load role_tags %}
<div style="display:flex;align-items:center;gap:10px">
  <div style="font-size:22px">🏥</div>
  <div>
    <div class="h2" style="margin:0">Staff Panel</div>
    <div class="small">Telehealthscare Services</div>
  </div>
</div>

<div class="sep" style="margin:12px 0"></div>

<nav class="staff-nav">
  <a href="{% url 'website:staff_dashboard' %}" class="{% if request.path == '/staff/' %}active{% endif %}">📊 <span>Dashboard</span></a>
  <a href="{% url 'website:staff_telehealth_booking_list' %}" class="{% if '/staff/bookings' in request.path %}active{% endif %}">📅 <span>Bookings</span></a>
  <a href="{% url 'website:staff_slot_list' %}" class="{% if '/staff/slots' in request.path %}active{% endif %}">🗓️ <span>Slots</span></a>
  <a href="{% url 'website:emr:staff_emr_dashboard' %}" class="{% if '/staff/emr' in request.path %}active{% endif %}">🧾 <span>EMR</span></a>
{% if request.user.is_superuser or request.user|has_group:'Admin' %}
  <a href="{% url 'website:staff_payment_list' %}" class="{% if '/staff/payments' in request.path %}active{% endif %}">💳 <span>Payments</span></a>
{% endif %}

  <div class="muted">Manage content</div>
  <a href="{% url 'website:staff_service_list' %}" class="{% if '/staff/services' in request.path %}active{% endif %}">🩺 <span>Services</span></a>
  <a href="{% url 'website:staff_blog_list' %}" class="{% if '/staff/blog' in request.path %}active{% endif %}">📰 <span>Blog</span></a>
  <a href="{% url 'website:staff_position_list' %}" class="{% if '/staff/positions' in request.path %}active{% endif %}">🧑‍⚕️ <span>Career Positions</span></a>

  <div class="muted">People &amp; support</div>
{% if request.user.is_superuser or request.user|has_group:'Admin' %}
  <a href="{% url 'website:staff_user_list' %}" class="{% if '/staff/users' in request.path %}active{% endif %}">👥 <span>Users &amp; Roles</span></a>
{% endif %}
  <a href="{% url 'website:staff_support_dashboard' %}" class="{% if '/staff/support' in request.path %}active{% endif %}">💬 <span>Support</span></a>
</nav>

<div class="sep" style="margin:12px 0"></div>
<div class="small">
  Logged in as <b>{{ request.user.username }}</b>
  <div style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap">
    <a class="btn" href="{% url 'website:home' %}">↩ Site</a>
    <form method="post" action="{% url 'website:logout' %}" style="display:inline;">
        {% csrf_token %}
        <button type="submit" class="btn" style="cursor:pointer;">Logout</button>
    </form>
  </div>
</div>